<template>
  <div class="kk">
    <div class="bb">
      <section class="detail-header">
        <img class="detail-img" :src="Info.CImg" />
        <div class="detail-header-right">
          <div class="detail-title clearfix">
            <h1 class="title">菜品名称</h1>
            
            <!--
            1. 不显示，这个菜谱是当前用户发布的
            2. 显示，后端返回一个是否收藏的字段
          -->
            <div class="detail-collection" v-if="!isOnwer">
              <!-- collection-at  no-collection-at-->
              <button
                href="javascript:;"
                style="background-color: red; color: white; font-size: 10px"
                class="button"
              >
                收藏
              </button>
            </div>
          </div>

          <div>
            <table>
              <tr>
                <td>菜品名称</td>
                <td><input v-model="Info.CName"></td>
              </tr>
              <tr>
                <td>评论数量</td>
                <td><input v-model="Info.CNum"></td>
              </tr>
              <tr>
                <td>作者</td>
                <td><input v-model="Info.CWriter"></td>
              </tr>
            </table>

          </div>
              
              
          <div class="user">
            <router-link id="tongji_author_img" class="img" to="">
              <img src="" />
            </router-link>
            <div class="info">
              <h4 class="h41">
                <router-link id="tongji_author" to=""> </router-link>
              </h4>
              <span>菜谱：菜谱/关注：关注量/粉丝：粉丝量</span>
              <strong class="strong2">2020-01-01</strong>
            </div>
          </div>
        </div>
      </section>
    </div>

    <div style="float: left" class="llll">
      <section class="detail-content">
        <div class="detail-materials">
          <p class="detail-materials-p">
            <strong>“</strong>这道菜的描述<strong>”</strong>
          </p>
          <h2 class="h2">用料</h2>
          <div class="detail-materials-box clearfix">
            <h3 class="h3">主料</h3>
            <ul class="ull">
              <li class="lii">
                食材
                <span><input v-model="Info.CLngredients" ></span>
              </li>
            </ul>
          </div>
          <div class="detail-materials-box clearfix">
            <h3 class="h3">辅料</h3>
            <ul class="ull">
              <li class="lii">
                盐
                <span><input v-model="Info.CSupplementary" ></span>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </div>

    <div class="bb">
      <div class="detail-explain">
        <div class="detail-explain">
          <h2>菜的做法</h2>
          <section class="detail-section clearfix">
            <em class="detail-number">1.</em>
            <div class="detail-explain-desc">
              <p class="pp">步骤1
                <input v-model="Info.Step">
              </p>
              <img class="imgg" src="" alt="" />
            </div>
          </section>
          <div class="skill">
            <h2 class="h2">烹饪技巧</h2>
            <p class="ppp"><input v-model="Info.CCokking"></p>
          </div>
        </div>
      </div>
    </div>

    <div class="bb">
      <div class="comment-box">
        <h2>吃货们的讨论</h2>
        <div class="comment-text">
          <a href="javascript:;" class="useravatar">
            <img src="" />
          </a>
          <div v-if="!isLogin">
            请先登录后，再评论<router-link to="/login">登录</router-link>
          </div>

          <div class="comment-right">
            <el-input
              type="textarea"
              :rows="5"
              :cols="50"
              placeholder="请输入内容"
            >
            </el-input>
            <div class="comment-button">
              <el-button class="send-comment" type="primary" size="medium"
                >提交</el-button
              >
            </div>
          </div>
        </div>
        <div class="comment-list-box">
          <ul class="comment-list">
            <li class="lll">
              <a
                target="_blank"
                href="https://i.meishi.cc/cook.php?id=14026963"
                class="avatar"
              >
              </a>
              <router-link to="" class="avatar">
                <img src="" class="imgk" />
                <h5 class="h5"></h5>
              </router-link>
              <div class="comment-detail">
                <p class="p5"></p>
                <div class="infos clearfix">
                  <span style="float: left"></span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    {{ $route.params.id }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: "http://localhost:55943/Images/猫鼬斩.jpg",
      Info: {
        CId: "",
        CName: "",
        CImg: "",
        CNum: "",
        CWriter: "",
        TypeId: "",
        TypeCode: "",
        ScreenID: "",
        Title: "",
        CLngredients: "",
        CSupplementary: "",
        Step: "",
        CCokking: "",
        Status: "",
      },
    };
  },
  methods: {
    fan() {
      this.$axios
        .get("http://localhost:55943/api/FanFood?id=" + this.$route.params.id)
        .then((res) => {
          this.Info.CId = res.data.CId;
          this.Info.CName = res.data.CName;
          this.Info.CImg = res.data.CImg;
          this.Info.CNum = res.data.CNum;
          this.Info.CWriter = res.data.CWriter;
          this.Info.TypeId = res.data.TypeId;
          this.Info.TypeCode = res.data.TypeCode;
          this.Info.ScreenID = res.data.ScreenID;
          this.Info.Title = res.data.Title;
          this.Info.CLngredients = res.data.CLngredients;
          this.Info.CSupplementary = res.data.CSupplementary;
          this.Info.Step = res.data.Step;
          this.Info.CCokking = res.data.CCokking;
          this.Info.Status = res.data.Status;
        });
    },
  },
  created() {
    this.fan();
  },
};
</script>

<style scope>
.detail-header {
  margin-top: 40px;
  display: flex;
  background-color: #fff;
}
.detail-img {
  width: 328px;
}
.detail-header-right {
  width: 662px;
}
.detail-title {
  box-sizing: border-box;
  width: 150%;
  padding-left: 25px;
  border-bottom: 1px solid #eee;
  /* max-width: 288px;
  height: 44px;
  padding: 28px 0px;
  line-height: 44px; */
  font-size: 36px;
  color: #333;
  float: left;
  border-bottom: 2px solid red;
}

.button {
  border-style: none;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  
}
.collected {
  background: #999;
}
.collecte {
  background: #ff3232;
}
.detail-collection {
  float: right;
  display: block;
  height: 50px;
  line-height: 44px;
  color: #fff;
  padding: 0px 14px;
  text-align: center;
  margin-top: 25px;
  cursor: pointer;
  margin-top: -100px;;
}
.detail-collection-a {
  display: inline-block;
  padding: 3px 0;
  width: 50px;
  color: #fff;
  text-align: center;
  line-height: 20px;
}
.collection-at {
  background-color: #ff3232;
}
.no-collection-at {
  background-color: #999;
}
.detail-property {
  margin-left: 2px;
  overflow: hidden;
}
.li {
  width: 199px;
  float: left;
  height: 48px;
  border-right: 1px solid #eee;
  padding: 18px 0px 18px 20px;
  border-bottom: 1px solid #eee;
}
.strong1 {
  color: #999;
  line-height: 18px;
  display: block;
  height: 18px;
}
.span1 {
  display: block;
  font-size: 24px;
  color: #ff3232;
  line-height: 30px;
  width: 100px;
}
.user {
  height: 70px;
  padding: 20px 0px 20px 20px;
  overflow: hidden;
  font-size: 12px;
}
.user-a.img {
  display: block;
  height: 70px;
  width: 70px;
  float: left;
  position: relative;
  border-radius: 35px;
  overflow: hidden;
}
.user-a.img-img {
  display: block;
  height: 70px;
  width: 70px;
}
.info {
  float: left;
  padding-left: 10px;
  height: 70px;
}
.h41 {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: #ff3232;
  position: relative;
}
.a {
  color: #ff3232;
  display: inline-block;
  vertical-align: top;
  padding-right: 0px;
  height: 22px;
}
.span2 {
  line-height: 24px;
  display: block;
  color: #666;
  padding-top: 4px;
}
.strong2 {
  line-height: 22px;
  color: #999;
}

.detail-content {
  margin-top: 20px;
}
.h2 {
  font-size: 24px;
  color: #333;
  height: 66px;
  line-height: 66px;
  border-bottom: 1px solid #eee;
  text-indent: 24px;
  font-family: Microsoft Yahei;
  display: block;
  text-align: left;
  border-bottom: 1px solid gray;
}
.detail-materials {
  background-color: #fff;
}
.detail-materials-p {
  line-height: 24px;
  font-size: 14px;
  padding: 20px 24px 10px;
  color: #666;
  text-align: left;
}
.detail-materials-box {
  margin-bottom: 20px;
  margin-left: 20px;
  margin-top: 20px;
  float: left;
}

.h3 {
  width: 48px;
  height: 22px;
  color: #999;
  background: #f5f5f5;
  border: 1px solid #ddd;
  text-align: center;
  line-height: 24px;
  margin: 14px 5px 14px 25px;
  float: left;
}

.ull {
  float: left;
  width: 910px;
}

.lii {
  float: left;
  box-sizing: border-box;
  height: 54px;
  line-height: 54px;
  margin: 0 5px 5px 5px padding 0 10px border 1px solid #eee;
}

.detail-explain {
  margin-top: 400px;
  background-color: #fff;
  padding-bottom: 20px;
  text-align: left;
}
.detail-section .detail-number {
  font-size: 50px;
  color: #ff3232;
  font-style: italic;
  text-align: center;
  font-family: arial;
  height: 50px;
  width: 100px;
  display: block;
  float: left;
  line-height: 50px;
}
.detail-explain-desc {
  width: 650px;
  overflow: hidden;
}
.pp {
  line-height: 24px;
  color: #666;
  padding: 10px 20px 10px 0p;
  position: relative;
  font-size: 14px;
}
.imgg {
  max-width: 550px;
}

.ppp {
  font-size: 12px;
  padding-left: 100px;
  padding-top: 10px;
}

.comment-box {
  background-color: #ffffff;
  margin-top: 20px;
  padding: 0 20px;
}

.h22 {
  font-size: 24px;
  color: #333;
  height: 66px;
  line-height: 66px;
  border-bottom: 1px solid #eee;
}

.comment-text {
  margin-top: 20px;
}
.useravatar {
  margin-right: 20px;
}
.imggg {
  vertical-align: top;
  width: 36px;
  height: 36px;
}
.comment-right {
  display: inline-block;
  width: 80%;
}
.comment-button {
  text-align: right;
  margin-top: 10px;
}
.send-comment {
  background: #ff3232;
  border: none;
}
.comment-list-box {
  border-top: 1px solid #eee;
  margin-top: 20px;
  padding-top: 30px;
}

.lll {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
.avatar {
  height: 82px;
  width: 50px;
  overflow: hidden;
  display: inline-block;
}
.h5 {
  white-space: nowrap;
}
.imgk {
  height: 50px;
  width: 50px;
}
.comment-detail {
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  width: 80%;
}
.p5 {
  margin: 0;
  font-size: 14px;
}
.infos {
  margin-top: 10px;
  color: #999;
}
.thumbs {
  cursor: pointer;

  font-size: 18px;
}
.thumbs-actve {
  color: red;
}
.bb {
  background-color: white;
  margin: 0 auto;
  margin-top: 20px;
  width: 80%;
}
.kk {
  background-color: rgb(221, 233, 177);
}
.llll {
  margin: 0 auto;
  background-color: white;
  width: 80%;
  margin-left: 10%;
  margin-top: 20px;
}
input{
  border-style:none
}
</style>